<template>
  <div class="main-skill" :style="[$parent.getTitleDirStyle, getModBottom]">
    <RTitle :title-color="getModColor" icon="skill" :isShow="getSettingStatus('title')"
            :isFixed="$parent.getTitleDir==='row'" v-model="title"/>
    <div class="skill-empty" v-if="dataLs.length === 0">
      <div class="skill-empty-content" @click="onShowEdit">
        <img alt="添加" src="@/assets/resume/skill/plus.svg"/>
        <span>技能特长</span>
      </div>
    </div>
    <div class="skill-content" v-else>
      <div class="content" v-for="(item, index) in dataLs" :key="index">
        <img @click="delItem(index)" alt="删除" class="del" src="@/assets/resume/del.svg"/>
        <div class="skill-name">{{item.name}}</div>
        <div :class="settings.skin" :style="{borderColor: getModColor}">
          <div class="progress" :style="{width: `${item.value}%`, background: getModColor}"></div>
        </div>
      </div>
    </div>

    <!--操作-->
    <ROperator :operators="['edit', 'drag', 'skin', 'setting']" @edit="onShowEdit" @skin="onChangeSkin"
               @setting="onChangeSetting" @drag="onDrag($event)"/>
    <!--编辑-->
    <RPop v-model="showEdit" title="编写技能特长" width="500px" height="150px">
      <div class="item-between">
        <input ref="defLabel" style="flex: 1;margin-right: 15px" placeholder="自定义技能"/>
        <RButton @click="addLabel" size="small">添加</RButton>
      </div>
      <div>
        <div>根据您的职业推荐的技能</div>
        <div class="skill-label">
          <div @click="addLabel(item)" :style="getLabelStyle(item)" v-for="(item, index) in labels"
               class="label-content" :key="index">
            {{item}}
          </div>
        </div>
      </div>
      <div>
        <div style="margin-bottom: 5px">已经添加的技能</div>
        <div class="temp-skill" v-for="(item, index) in tempData" :key="index">
          <div class="temp-info">
            <img class="del-temp" @click="delTempItem(index)" alt="删除" src="@/assets/resume/del.svg"/>
            <div class="name-temp">{{item.name}}</div>
          </div>
          <RSlider v-model="item.value"/>
        </div>
      </div>
      <div class="item-center">
        <div style="width: 150px;display: flex;flex-direction: row;justify-content: space-between">
          <RButton @click="save">确定</RButton>
          <RButton @click="onShowEdit" type="cancel">取消</RButton>
        </div>
      </div>
    </RPop>
    <!--换肤-->
    <div class="skill-skin" v-show="changeSkin" @mouseleave="onChangeSkin">
      <div @click="settings.skin=skin" class="skin-choice"
           :style="settings.skin===skin?{borderColor: 'lightskyblue'}:{}"
           v-for="skin in ['skin-quad', 'skin-rect', 'skin-round', 'skin-round-small']" :key="skin">
        <img :src="getSkin(skin)"/>
      </div>
    </div>
    <!--设置-->
    <div v-show="changeSetting" @mouseleave="onChangeSetting">
      <RSetting v-model="settings.switchLs"></RSetting>
    </div>
  </div>
</template>

<script>
import RTitle from '../base/RTitle'
import ROperator from '../base/ROperator'
import mixin from '../../store/mixin'
import RSetting from '../base/RSetting'
import RPop from '../base/RPop'
import RButton from '../base/RButton'
import RSlider from '../base/RSlider'

export default {
  name: 'Skill',
  components: {RSlider, ROperator, RTitle, RSetting, RPop, RButton},
  mixins: [mixin],
  data () {
    return {
      showEdit: false,
      changeSetting: false,
      changeSkin: false,
      labels: [],
      tempData: []
    }
  },
  props: ['compId'],
  methods: {
    onShowEdit () {
      // getByPro
      this.labels = [
        '聪明', '善良', '勤劳', '能干', '好吃', '懒做', '好学上进', 'java', 'c++', '前端', '后端', 'javascript',
        'html', 'css', 'vue', 'rect', 'php', 'c#', 'python', 'linux', 'erlang', 'golang', '算法', '高并发',
        '性能优化', '兼容性', '性能监控', 'JVM', '工程化', '异步编程', '高可用', '多线程', '多进程'
      ]
      this.tempData = this._.cloneDeep(this.dataLs)
      this.showEdit = !this.showEdit
    },
    onChangeSetting () {
      this.changeSetting = !this.changeSetting
    },
    onChangeSkin () {
      this.changeSkin = !this.changeSkin
    },
    getSkin (skin) {
      return require(`@/assets/resume/skill/${skin}.png`)
    },
    delItem (index) {
      this.dataLs.splice(index, 1)
    },
    getLabelStyle (label) {
      if (this.tempData.findIndex(item => item.name === label) !== -1) {
        return {background: 'lightskyblue', color: 'white'}
      }
    },
    addLabel (label) {
      label = label || this.$refs.defLabel.value
      if (label && this.tempData.findIndex(item => item.name === label) === -1) {
        this.tempData.push({name: label, value: '66.67'})
      }
    },
    delTempItem (index) {
      this.tempData.splice(index, 1)
    },
    save () {
      this.dataLs = this.tempData
      this.showEdit = !this.showEdit
    }
  }
}
</script>

<style scoped lang="less">
  .main-skill {

    .label-content {
      height: 20px;
      margin-right: 15px;
      margin-bottom: 10px;
      border: lightgrey 1px solid;
      border-radius: 10px;
      padding: 0 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .skill-label {
      width: 100%;
      box-sizing: border-box;
      height: 200px;
      border: lightgrey solid 1px;
      margin-top: 5px;
      padding: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      overflow-y: auto;
    }

    .temp-skill {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .del-temp {
        width: 15px;
        cursor: pointer;
      }

      .name-temp {
        .label-content();
        margin: 0 10px;
      }

      .temp-info {
        display: flex;
        flex-direction: row;
        align-items: center;

        + div {
          width: 279px;
        }
      }
    }

    .skill-empty {
      width: 100%;

      .skill-empty-content {
        padding: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border: lightgrey 1px dashed;
        background: rgba(135, 206, 250, 0.2) content-box;
        cursor: pointer;

        img {
          height: 12px;
          margin-right: 5px;
        }
      }
    }

    .skill-content {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .skill-name {
        margin-left: 2px;
        margin-bottom: 5px;
      }

      .content {
        padding: 0 3px;
        position: relative;
        margin-right: 10px;
        cursor: pointer;

        &:hover {
          background: rgba(246, 246, 246, 0.8);

          .del {
            display: block;
          }
        }

        .del {
          position: absolute;
          right: -6px;
          top: -6px;
          width: 12px;
          height: 12px;
          display: none;
        }
      }
    }

    .skin-base {
      border: 1px solid;
      width: 150px;
    }

    .skin-rect {
      .skin-base();
      height: 10px;
    }

    .skin-round {
      .skin-base();
      border-radius: 5px;
      height: 10px;
    }

    .skin-round-small {
      .skin-base();
      border-radius: 2.5px;
      height: 5px;
    }

    .skin-quad {
      .skin-base();
      height: 10px;
      transform: skewX(-25deg);
    }

    .progress {
      height: 100%
    }

    .skill-skin {
      position: absolute;
      right: 0;
      top: 30px;
      width: 355px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 10px 15px 0 15px;
      border: whitesmoke 1px solid;
      box-shadow: 10px 10px 10px whitesmoke;
      z-index: 3;
      background: white;

      .skin-choice {
        width: 155px;
        padding: 9px;
        border: 1px solid whitesmoke;
        margin-bottom: 10px;
        cursor: pointer;
      }

      &:before {
        content: "";
        display: block;
        position: absolute;
        right: 23px;
        top: -10px;
        width: 0;
        height: 0;
        border-bottom: 10px whitesmoke solid;
        border-left: 10px transparent solid;
        border-right: 10px transparent solid;
      }

      &:after {
        content: "";
        display: block;
        position: absolute;
        right: 23px;
        top: -9px;
        width: 0;
        height: 0;
        border-bottom: 10px white solid;
        border-left: 10px transparent solid;
        border-right: 10px transparent solid;
      }
    }
  }

</style>
